<!--
 * @FilePath: /my-map-demo/src/views/chart-types/components/AreaMap.vue
 * @Author: 张文鑫
 * @Date: 2024-03-21 09:29:33
 * @Description: 面图组件
-->
<template>
  <MapBase :layers="[areaLayer]" />
</template>

<script setup>
import MapBase from "../MapBase.vue";
import { Vector as VectorLayer } from "ol/layer";
import { Vector as VectorSource } from "ol/source";
import buildingData from "../data/heatMapData.json";
import GeoJSON from "ol/format/GeoJSON";
import { Style, Fill, Stroke } from "ol/style";

// 提取面数据
const features = new GeoJSON().readFeatures(buildingData, {
  dataProjection: "EPSG:4326",
  featureProjection: "EPSG:4326",
});

// 创建面图数据源
const areaVectorSource = new VectorSource({
  features: features,
});

// 创建面图层
const areaLayer = new VectorLayer({
  source: areaVectorSource,
  style: new Style({
    fill: new Fill({
      color: "rgba(100, 200, 255, 0.5)",
    }),
    stroke: new Stroke({
      color: "#319FD3",
      width: 1,
    }),
  }),
});
</script>
